* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
  width: 100%;
}

.fs {
  width: 100vw;
  height: 100vh;
}

.theme-dark {
  @theme-color : rgba(0, 0, 0, .9);
  @light : #eee;
  @blur-light: rgba(255, 255, 255, .3);
  color: @light;
  text-shadow: 0 0 4px @light;

  &.theme {
    background-color: @theme-color;
  }

  .bd-l {
    border-left: 1px solid @light;
  }

  .bd-r {
    border-right: 1px solid @light;
  }

  .bd-b {
    border-bottom: 1px solid @light;
  }

  .bd-t {
    border-top: 1px solid @light;
  }

  .box-blur {
    box-shadow: 0 0 20px 5px @blur-light inset;
  }
}


.theme-blue {
  @theme-color : rgba(11, 26, 226, 0.9);
  @light : rgb(0, 247, 255);
  @blur-light: rgba(0, 247, 255, .3);
  color: @light;
  text-shadow: 0 0 4px @light;

  &.theme {
    background-color: @theme-color;
  }

  .bd-l {
    border-left: 1px solid @light;
  }

  .bd-r {
    border-right: 1px solid @light;
  }

  .bd-b {
    border-bottom: 1px solid @light;
  }

  .bd-t {
    border-top: 1px solid @light;
  }

  .box-blur {
    box-shadow: 0 0 20px 5px @blur-light inset;
  }
}